<template>
  <section class="page">
    <headerbar>学时统计</headerbar>

    <section class="bg-white filter-wrap">
      <div class="item">
        <cube-select
          v-model="value"
          :options="options">
        </cube-select>
      </div>
    </section>

    <section class="mgt-4 block">
      <div class="d-scroll-head-menu list-wenda" style="">
        <noData v-if="!hasList() && !isLoading"></noData>
        <cube-scroll
          ref="scroll"
          :options="scrollOptions"
          @pulling-up="onPullingUp"
        >

          <template  v-for="item in list" >
            <div @click="goDetail()" class="item">
              <div class="text-wrap">
                <div class="title"><span>{{item.userName}}</span></div>
                <div class="tip"><span class="one">应完成学时：{{item.ywcxs}}</span><span class="one">已完成学习：<span class="color-red">{{item.hours}}</span></span>
                </div>
              </div>
            </div>
            <div class="line mgh-2"></div>
          </template>


        </cube-scroll>
      </div>


    </section>
  </section>
</template>

<script>
  export default {
    name: 'classHourStatistics',
    data () {
      return {
        scrollOptions: {
          pullUpLoad: true,
          scrollbar: false
        },
        list: [],
        options: [],
        value: '',
        loading: true,
        pageIndex: 1,
        pageSize: 10
      }
    },
    created () {
      let currYear = new Date().getFullYear()
      for (let i = 1990; i <= currYear; i++) {
        this.options.push(i)
      }
      this.value = currYear
      this.countXs()
    },
    methods: {
      hasList () {
        return this.list.length > 0
      },
      goDetail () {},
      countXs () {
        let params = {
          "limit": this.pageSize,
          "page": this.pageIndex,
          "year": this.value + "",
        }
        this.loading = true
        return this.fetchService.countXs(params).then(res => {
          this.loading = false
          if (res.code !== 0) {
            return this.tools.tip(res.message)
          }
          if (!Array.isArray(res.data) && !res.data) {
            return false
          }
          if (res.data.length < 1) {
            return this.tools.tip('无更多数据')
          }
          this.list = this.list.concat(res.data)
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate()
          return res
        })
      },
      onPullingUp () {
        this.pageIndex ++
        this.countXs().then(res => {
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
          })
        })
      }
    },
    watch: {
      value (newVal, oldVal) {
        this.pageIndex = 1
        this.list = []
        this.countXs()
      }
    }
  }
</script>

